<template>
<div class="box-padding">
    <Form label-position="right" :label-width="100">
        <div class="role-title">{{ $route.params.name }}</div>
        <div class="add-edit-detail-box">
            <Row type="flex" justify="center" class="code-row-bg-ledger">
                <Col span="12">
                <FormItem label="所属机构">
                    <Input v-model="ledgerObj.parentName" placeholder="请输入所属机构" disabled />
                </FormItem>
                </Col>
            </Row>
            <Row type="flex" justify="center" class="code-row-bg-ledger">
                <Col span="12">
                <FormItem label="机构编号" :required="$route.params.type == 'detail' ? false : true">
                    <Input v-model="ledgerObj.code" placeholder="请输入机构编号" :disabled="$route.params.type == 'detail' || $route.params.type == 'edit' ? true : false" />
                </FormItem>
                </Col>
            </Row>
            <Row type="flex" justify="center" class="code-row-bg-ledger">
                <Col span="12">
                <FormItem label="机构名称" :required="$route.params.type == 'detail' ? false : true">
                    <Input v-model="ledgerObj.name" placeholder="请输入机构名称" :disabled="$route.params.type == 'detail' ? true : false" />
                </FormItem>
                </Col>
            </Row>
            <Row type="flex" justify="center" class="code-row-bg-ledger">
                <Col span="12">
                <FormItem label="概况说明">
                    <Input v-model="ledgerObj.description" type="textarea" :rows="4" placeholder="请输入概况说明" :disabled="$route.params.type == 'detail' ? true : false" />
                </FormItem>
                </Col>
            </Row>
        </div>
        <div class="role-bottom" v-show="$route.params.type != 'detail'">
            <Button type="primary" @click="save">保存</Button>
            <Button style="margin-left:20px;" @click="cancel('add-department')">取消</Button>
        </div>
    </Form>

</div>
</template>

<script>
import {
    mapMutations
} from 'vuex'
import closeTag from '../../../mixins/closeTag'
import Utils from '../../../common/util'
export default {
    mixins: [closeTag],
    data() {
        return {
            ledgerObj: {
                code: ''
            }
        }
    },
    watch: {
        $route(to, from) {
            if (to.name == 'add-department') {
                if (this.$route.params.type != 'add') {
                    this.deptDetail()
                } else {
                    this.ledgerObj = {}
                    if (this.$route.query.parentName) {
                        this.$set(
                            this.ledgerObj,
                            'parentName',
                            this.$route.query.parentName
                        )
                    }
                }
            }
        }
    },
    mounted() {
        if (this.$route.params.type != 'add') {
            this.deptDetail()
        }else{
            this.getCode()
        }
        if (this.$route.query.parentName) {
            this.$set(this.ledgerObj, 'parentName', this.$route.query.parentName)
        }
    },
    methods: {
        ...mapMutations(['closeTag']),
        //  取消关闭
        closetab() {
            this.closeTag({
                name: this.$route.name,
                params: this.$route.params,
                query: this.$route.query
            });
        },
        getCode() {
            let data = {
                type: 4,
                parentId: this.$route.params.id
            }

            this.$api.companyOrganization.codeGenerate(data).then(resp => {
                if (resp.code == 200) {
                    this.ledgerObj.code = resp.data
                }
            })
        },
        // 详情
        deptDetail() {
            if (this.$route.params.name === '日志详情') {
                this.$api.operationLog
                    .getOperationLogDetail(this.$route.params.id)
                    .then(res => {
                        if (res.code === 200) {
                            let data = JSON.parse(res.data.params)
                            this.ledgerObj = {
                                ...data
                            }
                        } else {
                            this.$Message.error(res.message)
                        }
                    })
            } else {
                this.$api.companyOrganization
                    .deptDetail(this.$route.params.objectId)
                    .then(resp => {
                        if (resp.code == 200) {
                            this.ledgerObj = resp.data
                        } else {
                            this.$Message.warning(resp.data)
                        }
                    })
            }
        },
        // 添加/编辑
        save() {
            if (this.ledgerObj.code.length > 30) {
                this.$Message.warning("机构编号不能超过30个字符！");
                return;
            }
            if (!this.$regex.numberAndEnglishRegEx(this.ledgerObj.code)) {
                this.$Message.warning("机构编号只能包含英文字母和数字！");
                return;
            }
            if (!this.ledgerObj.name) {
                this.$Message.warning("机构全称不能为空！");
                return;
            }
            if (this.ledgerObj.name.length > 60) {
                this.$Message.warning("机构全称不能超过60个字符！");
                return;
            }
            if (this.ledgerObj.description && this.ledgerObj.description.length > 500) {
                this.$Message.warning("概况说明不能超过500个字符！");
                return;
            }
            if (this.$route.params.type == 'edit') {
                this.ledgerObj.parentId = this.$route.params.parentId;
                this.$api.companyOrganization.deptEdit(this.ledgerObj).then(resp => {
                    if (resp.code == 200) {
                        this.$Message.success(resp.message)
                        // Utils.$emit('demo', 'msg')
                        this.cancel()
                    }
                })
            } else {
                this.ledgerObj.parentId = this.$route.params.id
                this.ledgerObj.type = this.$route.query.type
                this.$api.companyOrganization.deptAdd(this.ledgerObj).then(resp => {
                    if (resp.code == 200) {
                        this.$Message.success(resp.message)
                        // Utils.$emit('demo', 'msg')
                        this.cancel('add-department')
                    } else {
                        this.$Message.warning(resp.message)
                    }
                })
            }
        },
        // 取消
        cancel() {
            this.closetab()
            this.$router.push({
                path: '/organization/enterprise-info'
            })
        },
    }
}
</script>

<style scoped>
.code-row-bg-ledger {
    padding: 15px 0;
}

.add-edit-detail-box {
    padding: 40px 0;
}

.center1 {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
